<template>
	<view class="content">
		<view style="height: 1rpx; width: 100%;"></view>
		<view class="tabs_one" v-if="tabsLists.length>0">
				<u-tabs :list="tabsLists" :keyName="'shop_name'" :current="tabCurrent" :lineColor="'red'" :activeStyle="{ color: 'red',fontSize:'28rpx',fontWeight:700,width: 'max-content'}" :inactiveStyle="{ color: '#000' ,fontSize:'28rpx',width: 'max-content'}" :itemStyle="{ height: '100rpx' }" @click="tabsClick"></u-tabs>
		</view>
		<view class="order_ul">
			<!-- 清货列表 -->
			<view v-if="listData.length>0">
				<view class="order_li" v-for="(item,index) in listData" :key="index" :class="{'checkbox':item.selectTrue}" @click.stop="checkboxClick(item)">
					<view class="li_top le">
						<view class="top_left">
							<view class="bh" v-if="!item.is_other">
								<view>订单号:</view>
								<view class="in" v-for="(items,index) in item.orders">
									<text>{{items.order_id}}</text>
									<text v-if="item.orders.length-1!=index">,</text>
								</view>
							</view>
							<view class="bh" v-else>
								<view style="font-size: 26rpx;">第三方单号:</view>
								<view class="in">
									<text>{{item.other.order_id}}</text>
								</view>
							</view>
						</view>
						<!-- 分配选择框 -->
						<!-- <view class="top_right">					
							<view class="car_checkbox">
								<u-checkbox-group :size="20">
									<u-checkbox :checked="item.selectTrue" @change="checkboxChange(item)" activeColor="#16BB5D" shape="circle"></u-checkbox>
								</u-checkbox-group>
							</view>
						</view> -->
						<!-- 分配选择框 -->
					</view>
					
					<!-- 内容 -->
					<view class="li_contes" v-if="!item.is_other">
						<view class="li_title">{{item.store_name}}</view>
					</view>
					<view class="li_contes" v-else>
						<view class="li_title">{{item.consignee}}</view>
						<!-- <view class="li_span">{{item.address}}</view> -->
					</view>
					<!-- 内容 end-->
					
					<!-- 商品列表 -->
					<orderListGoods :itemData="item" @checkboxClick="checkboxClick"></orderListGoods>
					<!-- 商品列表 end-->
				</view>
			</view>
			<!-- 清货列表 end-->
			
			<!-- 没数据 -->
			<view v-else-if="listData.length==0 && !loadingTrue" style="padding: 20rpx 0;">
				<nullstate></nullstate>
			</view>
			
		</view>
		
		<!-- 底部按钮 批量分配-->
		<view class="check_btn">
			<view class="btn_left">
				<!-- <u-checkbox-group :size="20">
					<u-checkbox :checked="checkedAll" @change="checkedAllChange" activeColor="#16BB5D" shape="circle" label="全选" :labelColor="'#16BB5D'"></u-checkbox>
				</u-checkbox-group> -->
			</view>
			<view class="btn_right">
				<view class="right_le">
					<view class="on">
						<logisticsOrderTeam :columnsAll="columnsAll" :columnsId="columnsId" @teamClick="teamClick"></logisticsOrderTeam>
					</view>
				</view>
				<view class="right_ri">
					<!-- <view class="bs" v-if="columnsAllId!=0" @click="columnsAllSubmit">确认划分</view> -->
					<!-- <view class="bs hui" v-else>选择司机</view> -->
					<view class="bs" v-if="btnHui" @click="columnsAllSubmit">开始配送</view>
					<view class="bs hui" v-else>选择订单</view>
				</view>
				<view class="tab_right" @click="handleOne">
					<text class="on">日期</text>
					<text class="iconfont icon-a-huaban2fuben11"></text>					
				</view>
				
			</view>	
		</view>
		<!-- 底部按钮 -->
		
		
		<view style="height: 1rpx; width: 100%;"></view>
		<!--加载框 start-->
		<loading :visible="loadingTrue" :show="false"></loading>
		<!--加载框 end-->
		
		<!-- 日期弹窗 -->
		<u-datetime-picker
			:show="dateShow"
			v-model="dateValue"
			mode="date"
			:formatter="formatter"
			:minDate="minDateData"
			:maxDate="maxDateData"
			closeOnClickOverlay
			@close="dateShow=false"
			@cancel="dateShow=false"
			@confirm="confirmClick"
		></u-datetime-picker>
		<!-- 日期弹窗 end-->
		
	</view>
</template>

<script setup>
	import { ref ,watch} from "vue"
	import {onLoad,onBackPress} from "@dcloudio/uni-app"

	//请求接口
	import {
		postOrderList,postOrderConfirm,postOrderSeller
	} from "@/service/pagesA/customer.js"
	
	//订单列表
	import saleList from "./components/saleList.vue";
	
	//订单goods
	import orderListGoods from "./components/orderListGoods.vue";
	import logisticsOrderTeam from "./components/logisticsOrderTeam.vue";
	
	//引入用户相关的小仓库
	import useCustomerStore from '@/store/customer.js'
	const useCustomer = useCustomerStore()
	
	//默认参数
	const listData=ref([]);
	const loadingTrue=ref(true);
	
	//默认日期弹窗
	const dateShow=ref(false);
	const minDateData=ref(Date.parse(new Date(new Date().getTime() - (24 * 60 * 60 * 1000))));
	const maxDateData=ref(Date.parse(new Date(new Date().getTime() + (24 * 60 * 60 * 1000))));
	const dateValue=ref(Date.parse(new Date()));//日期
	
	//批量分配
	const checkedAll=ref(false);
	const columnsAll=ref([[{name:'有货',id:0},{name:'无货',id:1}]]); //全选数据
	const columnsId=ref(0); //0 普通确认 1 无货确认
	const btnHui=ref(false); //按钮灰色
	
	//tab切换
	const tabsLists=ref([]);
	const tabCurrent=ref(0);
	const sellerId=ref(0); //供应商ID
	
	//获取数据postOrderConfirm
	async function postOrderLogisticWeightFun(){
		await postOrderList({
			lat:0,
			lng:0,
			shipping_date:useCustomer.timestampToTime(dateValue.value),
			confirm:0,
			seller_id:sellerId.value
		})
		.then((res)=>{
			console.log(res,'数据')
			listData.value=res;
			listData.value.forEach((its)=>its.selectTrue=false);
		})
		.finally(()=>{
			loadingTrue.value=false;
		})
	}
	
	//物流确认
	async function postOrderConfirmFun(arrs,recArrs){
		await postOrderConfirm({
			logistic_ids:arrs,
			model:columnsId.value,
			rec_ids:recArrs
		})
		.then((res)=>{
			//重新赋值
			resFilter(recArrs);
		})
		.finally(()=>{
			loadingTrue.value=false;
		})
	}
	
	//订单供应商
	async function postOrderSellerFun(){
		await postOrderSeller({
			shipping_date:useCustomer.timestampToTime(dateValue.value)
		})
		.then((res)=>{
			console.log(res,'sss')
			tabsLists.value=res;
		})
		.finally(()=>{
			// loadingTrue.value=false;
		})
	}
	
	//选择框选中
	function checkboxClick(item,liData=null){
		//console.log(item,liData,'111')
		
		//如果单个订单或者第三方订单
		if(item.orders.length==1 && item.orders[0].goods.length==1 && !item.is_other){//单个
			item.selectTrue=!item.selectTrue;
			item.orders[0].goods.forEach((its)=>its.has_storage=!its.has_storage);
		}else if(item.is_other){ //第三方
			item.selectTrue=!item.selectTrue;
		}else if(liData){//多个
			let AllBloo=[];//选中
			liData.has_storage=!liData.has_storage;
			item.orders.forEach((i,v)=>i.goods.forEach((val, ind) =>{if(!val.has_storage)AllBloo.push(val)}))
			if(AllBloo.length==0){
				item.selectTrue=true;
			}else{
				item.selectTrue=false;
			}
		}
	}
	
	//监听全选
	watch(listData, (newValue, oldValue)=>{
		// 全选
		// if(newValue.findIndex((its)=>its.selectTrue==false)==-1 && oldValue.length>0){
		// 	checkedAll.value=true;
		// }else{
		// 	checkedAll.value=false;
		// }
		
		//判断是否选择一个
		if(allResultFun(newValue).length>0 && oldValue.length>0){
			btnHui.value=true;
		}else{
			btnHui.value=false;
		}

	},{deep:true})
	
	//返回结果数据
	function allResultFun(all){
		let AllBloo=[];//选中
		all.forEach((i,v)=>{
			if(i.is_other && all.some( (its) => its.selectTrue ==true)){//第三方
				i.other.id=i.id;
				i.other.is_other=i.is_other;
				AllBloo.push(i.other)
			}else{
				i.orders.forEach((val, ind)=>val.goods.forEach((ites, ines) =>{
					if(ites.has_storage){
						ites.id=i.id;
						ites.is_other=i.is_other;
						AllBloo.push(ites)
					}
				}))
			}
		})
		return AllBloo;
	}
	
	//返回结果数据
	function allResultFuns(all){
		let AllBloo=[];//选中
		all.forEach((i,v)=>{
			if(i.is_other && i.selectTrue){//第三方
				i.other.id=i.id;
				i.other.is_other=i.is_other;
				AllBloo.push(i.other)
			}else{
				i.orders.forEach((val, ind)=>val.goods.forEach((ites, ines) =>{
					if(ites.has_storage){
						ites.id=i.id;
						ites.is_other=i.is_other;
						AllBloo.push(ites)
					}
				}))
			}
		})
		return AllBloo;
	}
	
	//全选分配
	function checkedAllChange(e){
		console.log(e,checkedAll.value,'ee')
		checkedAll.value=e;
		if(!checkedAll.value){
			listData.value.forEach((its)=>{
				its.selectTrue=false;
				if(!its.is_other){
					its.orders.forEach((item)=>{
						item.goods.forEach((it)=>{
							it.has_storage=false;
						})
					})
				}
			})
		}else{
			listData.value.forEach((its)=>{
				its.selectTrue=true;
				if(!its.is_other){
					its.orders.forEach((item)=>{
						item.goods.forEach((it)=>{
							it.has_storage=true;
						})
					})
				}
			})
		}
		
	}
	
	//开始配送
	function columnsAllSubmit(){
		let listDatas=allResultFuns(listData.value);
		
		console.log(listDatas,'listDatas')
		if(listDatas.length>0){
			loadingTrue.value=true;
			let arrs=[]; //物流ID数组
			let recArrs=[]; //订单商品ID数组
			listDatas.forEach((its)=>{
				if(!its.is_other){
					recArrs.push(its.rec_id)
				}
				arrs.push(its.id)
			})
			console.log([...new Set(arrs)],[...new Set(recArrs)],'arrs,recArrs')
			
			postOrderConfirmFun([...new Set(arrs)],[...new Set(recArrs)]);
			// resFilter(recArrs);
		}else{
			uni.showToast({title: '请选择订单!',icon:'none'});
		}
	}
	
	//清除过滤数据
	function resFilter(selectData){
		let res=JSON.parse(JSON.stringify(listData.value));
		res = res.filter( (i, v) => i.selectTrue==false);
		res.forEach((its,index)=>{
			if(!its.is_other){ //不是第三方
				its.orders.forEach((val,ind)=>{
					let newData = val.goods.filter(
					  (a) => !selectData.some((b) => a.rec_id === b)
					)
					val.goods=newData;
				})
			}
		});
		
		//重新
		res.forEach((its,index)=>{
			if(!its.is_other){ //不是第三方
				let newData = its.orders.filter(
				  (a) => a.goods.length>0
				)
				its.orders=newData;
			}
		});
		
		listData.value=res;
	}

	//全选司机
	function teamClick(id){
		columnsId.value=id;
		console.log(id,'权限')
		// columnsAllId.value=id;
	}
	
	//日期格式
	function formatter(type, value) {
		if (type === 'year') {
				return `${value}年`
		}
		if (type === 'month') {
				return `${value}月`
		}
		if (type === 'day') {
				return `${value}日`
		}
		return value
	}
	
	//日期确认
	function confirmClick(e){
		console.log(e,'e')
		dateValue.value=e.value;	
		listData.value=[];
		dateShow.value=false;
		loadingTrue.value=true;
		
		tabsLists.value=[];
		tabCurrent.value=0;
		//重新获取
		postOrderSellerFun();
		postOrderLogisticWeightFun();
	}
	
	//日期选择
	function handleOne(){
		dateShow.value=true;
	}
	
	//tab点击
	function tabsClick(e){
		console.log(e)
		sellerId.value=e.seller_id;
		
		listData.value=[];
		dateShow.value=false;
		loadingTrue.value=true;
		//重新获取
		postOrderLogisticWeightFun();
	}
	
	onLoad((res)=>{
		postOrderSellerFun();
		postOrderLogisticWeightFun();
	})
	
	//物理返回判断
	onBackPress((res)=>{
		
		// if(btnHui.value){
			
		// 	return true; // 此处返回 true 表示阻止页面跳转或关闭
		// }
		
	})
	
</script>

<style lang="scss" scoped>
page,.content{
	background: #F5F5F5;
	// background: #fff;
	
	//#ifdef H5 
	min-height: calc((100vh - 94px));
	// #endif 
	
	//#ifdef MP-WEIXIN || APP-PLUS
	min-height: 100vh;
	// #endif 
}
.order_li{
	padding: 16rpx;
	margin: 0 20rpx;
	margin-bottom: 20rpx;
	border-radius: 15rpx;
	box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	background: #fff;
	border:4rpx solid #fff;
}
.order_ul{
	margin-top: 20rpx;
	padding-bottom: 100rpx;
	margin-top: 120rpx;
}

.li_top{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	
	line-height: 60rpx;
	// border-bottom: 2rpx solid #F7F7F7;
	// padding-bottom: 10rpx;
	// margin-bottom: 20rpx;
	
	// align-items: center;
	position: relative;
	.top_left{
		font-size:26rpx;
		color: #000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: auto;
		.bh{
			font-size:28rpx;
			font-weight: 500;
			display: flex;
			flex-direction: row;
			.in{
				font-size:30rpx;
				font-weight: 700;
				color: red;
			}
		}
	}
	.top_right{
		font-size: 30rpx;
		color: #FD7722;
		display: flex;
		flex: none;
		margin-left: 14rpx;
		
	}
}
.li_contes{
	.li_title{
		font-size: 26rpx;
		color: #333;
		font-weight: 700;
	}
	.li_span{
		font-size: 24rpx;
		color: #999;
		margin-top: 4rpx;
	}
}


.li_top.le::after {
	content: '';
	display: block;
	width: 8rpx;
	height: 40rpx;
	background-color: #FF3D5A;
	border-radius: 8rpx;
	position: absolute;
	top: 10rpx;
	left: -20rpx;
}

.order_li.checkbox{
	border:4rpx solid #16BB5D;
}

.check_btn{
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 0 30rpx;
	padding-right: 0;
	height:100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	z-index: 96;
	box-shadow: 0px 10rpx 16rpx 0px rgba(82,151,255,1);
	.btn_left{
		
	}
	.btn_right{
		display: flex;
		flex-direction: row;
		align-items: center;
		.right_le{
			display: flex;
			flex-direction: row;
			.in{
				font-size: 30rpx;
				color: #000;
			}
		}
		.right_ri{
			margin-left: 30rpx;
			.bs{
				padding: 18rpx 80rpx;
				color: #fff;
				font-size: 28rpx;
				border-radius: 12rpx;
				background-image: repeating-linear-gradient(45deg, #FF8331, #FF8331);
			}
			.bs.hui{
				background: #ccc;
			}
		}
	}
}

.tab_right{
	box-shadow: 0px 0px 24rpx 0px rgb(0,0,0,0.1);
	width: 60rpx;
	height: 100rpx;
	text-align: center;
	margin-left: 50rpx;
	.on{
		font-size: 24rpx;
		color: #666;
	}
	.iconfont{
		font-size: 32rpx;
		color: #666;
		width: 32rpx;
		height: 32rpx;
	}
}
.tabs_one{
	position: fixed;
	//#ifdef H5 
	top: 44px;
	// #endif 
	
	//#ifdef MP-WEIXIN || APP-PLUS
	top: 0px;
	// #endif 	
	left: 0;
	right: 0;
	background: #fff;
	box-shadow: 0 0 16rpx 0 rgba(0,0,0,0.1);
	z-index: 99;
}
</style>
